<template>
	<view class="contain">
		<view id="header">
			<!-- 这是我写的头部组件，可以忽略 -->
			<header title="Bingo" />
		</view>
		
		<view class='main'>
			<view class='left'>
				<scroll-view scroll-y="true" class="leftScroll" scroll-into-view="true" scroll-with-animation="true">
					<block wx:for="{{dataList}}" wx:for-list="item" wx:for-index="index" wx:key="index">
						<view class="{{currentActiveIndex == index?'leftActive':'leftInactive'}}" data-index="{{index}}" data-id='{{item.id}}' bindtap='changeLeftMenu'>
							<text>{{item.navTitle}}</text>
						</view>
					</block>
				</scroll-view>
			</view>
			<view class='right'>
				<!-- 
	          1. scroll-into-view="{{'inToview'+rigId}}"和下面的id="{{'inToview'+item.id}}"对应
	          2. rigId为变量，设置rigId的值，列表会滑动到对应的id
	          3. 注意：scroll-into-view的属性不能以数字开头
	      -->
				<scroll-view scroll-y="true" style="height: 1100rpx" bindscroll="scroll" scroll-top="{{scrollTop}}" scroll-into-view="{{'inToview'+rigId}}" scroll-with-animation="true">
					<block wx:for="{{dataList}}" wx:for-list="item" wx:for-index="index" wx:key="index">
						<view wx:if="{{item.goodsList.length != 0}}" class='itemTitle' id="{{'inToview'+item.id}}">{{item.navTitle}}</view>
						<view class='listItem' data-id='{{item.id}}'>
							<block wx:for="{{item.goodsList}}" wx:for-index="idx" wx:key="idx">
								<view class='listItemSub' data-text="{{}}">
									<view class='img'>
										<!-- 图片出不来就用灰色块代替了 -->
										<!-- <image src='{{item.goodsUrl}}'></image> -->
										<image src=''></image>
									</view>
									<view class='listText'>
										<text>{{item.goodsName}}</text>
										<text class='money'>¥{{item.shopPrice}}</text>
										<view>
											<text>已售{{item.saleNum}}</text>
											<image class="add-image" src="https://example.com/default-image.jpg"></image>
										</view>
									</view>
								</view>
							</block>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>

</template>
<script>
	Page({
	
	  data: {
	    // 数据列表
	    dataList: [
	      {
	        id: "01",
	        navTitle: "活动",
	        goodsList: [{
	          id: 1,
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "晨光优品中性笔",
	          typeList: ['粉红色', '淡蓝色', '淡黄色'],
	          shopPrice: 3,
	          saleNum: 20,
	        },
	        {
	          id: 2,
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "得力彩色中性笔",
	          typeList: ['白色', '橘色'],
	          shopPrice: 5.2,
	          saleNum: 20,
	        },
	        {
	          id: 3,
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "得力糖果中性笔",
	          shopPrice: 12,
	          saleNum: 20,
	        },
	        {
	          id: 4,
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "按压式花边修正带",
	          shopPrice: 6.9,
	          saleNum: 20,
	        },
	        {
	          id: 5,
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "得力文具便利贴",
	          shopPrice: 4,
	          saleNum: 20,
	        }
	        ],
	      },
	      {
	        id: "02",
	        navTitle: "新品",
	        goodsList: [{
	          id: 21,
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "晨光优品中性笔",
	          shopPrice: 3,
	          saleNum: 20,
	        },
	        {
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "得力彩色中性笔",
	          shopPrice: 5.2,
	          saleNum: 20,
	          id: 22,
	        },
	        {
	          id: 4,
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "按压式花边修正带",
	          shopPrice: 6.9,
	          saleNum: 20,
	        },
	        {
	          id: 5,
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "得力文具便利贴",
	          shopPrice: 4,
	          saleNum: 20,
	        }
	        ],
	      },
	      {
	        id: "03",
	        navTitle: "推荐",
	        goodsList: [{
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "晨光优品中性笔",
	          shopPrice: 3,
	          saleNum: 20,
	          id: 31,
	        },
	        {
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "得力彩色中性笔",
	          shopPrice: 5.2,
	          saleNum: 20,
	          id: 32,
	        },
	        {
	          id: 4,
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "按压式花边修正带",
	          shopPrice: 6.9,
	          saleNum: 20,
	        },
	        {
	          id: 5,
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "得力文具便利贴",
	          shopPrice: 4,
	          saleNum: 20,
	        },
	        ],
	      },
	      {
	        id: "04",
	        navTitle: "晨光系列",
	        goodsList: [{
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "晨光优品中性笔",
	          shopPrice: 3,
	          saleNum: 20,
	          id: 41,
	        },
	        {
	          id: 4,
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "晨光按压式花边修正带",
	          shopPrice: 6.9,
	          saleNum: 20,
	        },
	        {
	          id: 5,
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "晨光文具便利贴",
	          shopPrice: 4,
	          saleNum: 20,
	        },
	        ],
	      },
	      {
	        id: "05",
	        navTitle: "文具专区",
	        goodsList: [{
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "晨光优品中性笔(美)",
	          shopPrice: 3,
	          saleNum: 20,
	          id: 61,
	        },
	        {
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "得力彩色中性笔",
	          shopPrice: 5.2,
	          saleNum: 20,
	          id: 62,
	        },
	        ],
	      },
	      {
	        id: "06",
	        navTitle: "精品专区",
	        goodsList: [{
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "晨光优品中性笔",
	          shopPrice: 3,
	          saleNum: 20,
	          id: 1,
	        },
	        {
	          goodsUrl: "https://example.com/default-image.jpg",
	          goodsName: "得力彩色中性笔",
	          shopPrice: 5.2,
	          saleNum: 20,
	          id: 2,
	        },
	        ],
	      },
	    ],
	    searchHeight: 0,   // 搜索框高度
	    currentActiveIndex: 0,   // 当前菜单索引
	    isClickMenu: false, // 是否点击菜单
	    proListToTop: [],  // 记录每一个类型的列表道顶部的距离
	  },
	
	  onLoad: function (options) {
	    this.getEleHeight();
	  },
	
	  getEleHeight() {
	    var searchHeight, proListToTop = [];
	
	    // 搜索框所占据的高度，在后续滑动时需要减掉该高度
	    wx.createSelectorQuery().select("#searchBox").boundingClientRect(res => {
	      searchHeight = res.height
	      // 回调函数是异步的，所以需要在方法里面更新数据
	      this.setData({
	        searchHeight: searchHeight,
	      })
	    }).exec()
	
	    // 记录每一个类型的列表道顶部的距离
	    wx.createSelectorQuery().selectAll('.itemTitle').boundingClientRect((rects) => {
	      rects.forEach((rect) => {
	        proListToTop.push(rect.top.toFixed(2) - this.data.searchHeight);
	      })
	      this.setData({
	        proListToTop: proListToTop,
	      })
	    }).exec()
	
	  },
	
	  //滚动触发
	  scroll: function (e) {
	    // 若滑动是点击菜单触发的，则不进行判断；
	    if (!this.data.isClickMenu) {
	      // 获取滚动的高度
	      var scrollTop = e.detail.scrollTop;
	      var proListToTop = this.data.proListToTop;
	      var currentActiveIndex;
	      for (let i = 0; i < proListToTop.length; i++) {
	        // 根据滑动距离判断当前处于哪个菜单索引
	        if (e.detail.scrollTop < proListToTop[i] && i !== 0 && e.detail.scrollTop > proListToTop[i - 1]) {
	          this.setData({
	            currentActiveIndex: i - 1,
	          })
	        }
	      }
	    }
	    // 将点击菜单状态还原为false
	    this.setData({
	      isClickMenu: false,
	    })
	  },
	
	  //点击左边菜单事件
	  changeLeftMenu: function (e) {
	    // 当前点击的导航对应的右列表id
	    var rigId = e.currentTarget.dataset.id;
	    // 当前导航索引
	    var index = e.currentTarget.dataset.index;
	    // 点击当前导航索引，不作处理
	    if (this.data.currentActiveIndex === index) {
	      return;
	    }
	    this.setData({
	      rigId: rigId,
	      // 设置选中id
	      currentActiveIndex: index,
	      // 是否点击
	      isClickMenu: true
	    })
	  },
	
	})

</script>
<style>
	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	}
	
	::-webkit-scrollbar-track {
	  height: 20rpx;
	  color: black;
	}
	
	page {
	  width: 100%;
	  height: 100%;
	}
	
	.contain {
	  width: 100%;
	  height: 100%;
	  box-sizing: border-box;
	  /* padding-top: 140rpx; */
	  padding-bottom: 100rpx;
	}
	
	.leftActive {
	  color: red;
	  background-color: #fff;
	}
	
	.leftInactive {
	  background-color: #F8F8F8;
	}
	
	.searchBox {
	  display: flex;
	  background-color: rgba(219, 219, 221, 1);
	  align-items: center;
	  height: 60rpx;
	  padding: 10rpx 0;
	  position: fixed;
	  left: 0;
	  width: 100%;
	  z-index: 1;
	}
	
	.searchBox .search-button {
	  /* width: auto; */
	  min-height: 50rpx;
	  line-height: 50rpx;
	  width: 15%;
	  padding: 0;
	  line-height: 1;
	  font-size: 30rpx;
	}
	
	.search {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  /* height: 50rpx; */
	  border-radius: 30rpx;
	  margin-left: 20rpx;
	  padding: 0 20rpx;
	  background-color: white;
	  width: 65%;
	}
	
	.search input {
	  font-size: 30rpx;
	  width: 100%;
	}
	
	.search text {
	  color: gainsboro;
	  font-family: monospace;
	  font-size: 30rpx;
	  line-height: 46rpx;
	}
	
	.search image {
	  padding: 0 5rpx;
	  width: 46rpx;
	  height: 46rpx;
	}
	
	.main {
	  display: flex;
	  padding-top: 80rpx;
	}
	
	.left {
	  width: 25%
	}
	
	.left view {
	  width: 180rpx;
	  height: 70rpx;
	  padding-top: 30rpx;
	  text-align: center;
	  font-size: 32rpx;
	}
	
	.right {
	  width: 75%;
	}
	
	.listItemSub {
	  display: flex;
	}
	
	.listItem .img {
	  width: 200rpx;
	  height: 200rpx;
	  text-align: center;
	  padding-top: 10rpx;
	}
	
	.listItem .img image {
	  width: 80%;
	  height: 80%;
	  background-color: #eee;
	}
	
	.itemTitle {
	  font-size: 32rpx;
	  padding-left: 20rpx;
	  padding-top: 10rpx;
	  color: gray;
	}
	
	.listItem .listText {
	  display: flex;
	  flex-direction: column;
	  margin-top: 6rpx;
	
	  width: calc(100% - 200rpx);
	}
	
	.listItem .listText view {
	  display: flex;
	  align-items: flex-end;
	  justify-content: space-between;
	}
	
	.listItem .listText text {
	  font-size: 34rpx;
	  margin-top: 10rpx;
	}
	
	.listItem .listText .money {
	  color: red;
	}
	
	.listItem .listText view text {
	  font-size: 28rpx;
	  color: silver;
	  margin-right: 60rpx;
	  /* add  */
	  min-width: 80px;
	  display: inline-block;
	}
	
	.listItem .listText view button {
	  background-color: red;
	  color: white;
	  padding-right: 8px;
	  padding-left: 8px;
	  padding-top: 0px;
	}
	
	.add-image {
	  width: 40rpx;
	  height: 40rpx;
	  padding-right: 20rpx;
	}
	
	.leftScroll {
	  height: 100%;
	  width: 180rpx;
	  background: #F8F8F8;
	}
	

</style>